﻿<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模切材料小管家 - 原型展示</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            --primary-color: #2b6de5;
            --secondary-color: #3c8cff;
            --accent-color: #ff7d00;
            --success-color: #34c759;
            --light-bg: #f8f9fa;
            --border-color: #eaeaea;
            --text-primary: #333;
            --text-secondary: #666;
            --text-light: #999;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "PingFang SC", "Helvetica Neue", Arial, sans-serif;
        }
        
        body {
            background-color: #f5f7fa;
            color: var(--text-primary);
            font-size: 14px;
            line-height: 1.5;
            padding: 20px;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
        }
        
        .header {
            text-align: center;
            margin-bottom: 30px;
            padding: 20px;
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            color: white;
            border-radius: 12px;
            box-shadow: 0 4px 15px rgba(43, 109, 229, 0.2);
        }
        
        .header h1 {
            font-size: 28px;
            margin-bottom: 10px;
        }
        
        .header p {
            font-size: 16px;
            opacity: 0.9;
        }
        
        .category-section {
            margin-bottom: 40px;
        }
        
        .category-title {
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 20px;
            color: var(--text-primary);
            display: flex;
            align-items: center;
            padding: 15px;
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
        }
        
        .category-title i {
            margin-right: 12px;
            color: var(--primary-color);
            font-size: 20px;
        }
        
        .prototype-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 20px;
            margin-bottom: 20px;
        }
        
        .prototype-item {
            background: white;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 4px 15px rgba(0,0,0,0.08);
            transition: all 0.3s ease;
            border: 1px solid var(--border-color);
        }
        
        .prototype-item:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 25px rgba(0,0,0,0.15);
        }
        
        .prototype-header {
            background: linear-gradient(135deg, var(--light-bg), #e9ecef);
            padding: 15px;
            border-bottom: 1px solid var(--border-color);
        }
        
        .prototype-title {
            font-size: 16px;
            font-weight: bold;
            color: var(--text-primary);
            margin-bottom: 5px;
        }
        
        .prototype-desc {
            font-size: 13px;
            color: var(--text-secondary);
        }
        
        .prototype-frame {
            width: 100%;
            height: 600px;
            border: none;
            background: #f8f9fa;
        }
        
        .prototype-actions {
            padding: 15px;
            display: flex;
            gap: 10px;
        }
        
        .action-btn {
            flex: 1;
            padding: 8px 12px;
            border: none;
            border-radius: 6px;
            font-size: 13px;
            cursor: pointer;
            transition: all 0.3s;
            text-decoration: none;
            text-align: center;
        }
        
        .btn-primary {
            background: var(--primary-color);
            color: white;
        }
        
        .btn-secondary {
            background: var(--light-bg);
            color: var(--text-primary);
            border: 1px solid var(--border-color);
        }
        
        .action-btn:hover {
            transform: translateY(-1px);
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
        
        .status-badge {
            display: inline-block;
            padding: 2px 8px;
            border-radius: 10px;
            font-size: 11px;
            font-weight: 500;
            margin-left: 8px;
        }
        
        .status-complete {
            background: rgba(52, 199, 89, 0.1);
            color: var(--success-color);
        }
        
        .status-pending {
            background: rgba(255, 193, 7, 0.1);
            color: #ffc107;
        }
        
        .status-fixed {
            background: rgba(0, 123, 255, 0.1);
            color: #007bff;
        }
        
        .footer {
            text-align: center;
            margin-top: 40px;
            padding: 20px;
            color: var(--text-light);
            font-size: 13px;
        }
        
        @media (max-width: 768px) {
            .prototype-grid {
                grid-template-columns: 1fr;
            }
            
            .prototype-frame {
                height: 500px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 头部 -->
        <div class="header">
            <h1><i class="fas fa-industry"></i> 模切材料小管家</h1>
            <p>原型界面展示 - 基于iPhone 15 Pro屏幕规格设计</p>
        </div>
        
        <!-- 首页tab -->
        <div class="category-section">
            <div class="category-title">
                <i class="fas fa-home"></i>
                首页tab - 产品浏览与搜索
                <span class="status-badge status-complete">已完成</span>
            </div>
            <div class="prototype-grid">
                <div class="prototype-item">
                    <div class="prototype-header">
                        <div class="prototype-title">首页</div>
                        <div class="prototype-desc">主页面，包含搜索框、快捷入口（找材料商、来拼单、找加工商、找参数）、增值服务等</div>
                    </div>
                    <iframe src="home.html" class="prototype-frame"></iframe>
                    <div class="prototype-actions">
                        <a href="home.html" target="_blank" class="action-btn btn-primary">独立查看</a>
                        <button class="action-btn btn-secondary" onclick="refreshFrame(this)">刷新</button>
                    </div>
                </div>
                
                <div class="prototype-item" style="display: none;">
                    <div class="prototype-header">
                        <div class="prototype-title">产品首页</div>
                        <div class="prototype-desc">产品分类导航页面，左侧分类右侧二级类别，类似饿了么布局</div>
                    </div>
                    <iframe src="product-home.html" class="prototype-frame"></iframe>
                    <div class="prototype-actions">
                        <a href="product-home.html" target="_blank" class="action-btn btn-primary">独立查看</a>
                        <button class="action-btn btn-secondary" onclick="refreshFrame(this)">刷新</button>
                    </div>
                </div>
                
                <div class="prototype-item">
                    <div class="prototype-header">
                        <div class="prototype-title">材料产品一览</div>
                        <div class="prototype-desc">材料产品列表页面，支持省市区筛选和分类筛选</div>
                    </div>
                    <iframe src="product-list-material.html" class="prototype-frame"></iframe>
                    <div class="prototype-actions">
                        <a href="product-list-material.html" target="_blank" class="action-btn btn-primary">独立查看</a>
                        <button class="action-btn btn-secondary" onclick="refreshFrame(this)">刷新</button>
                    </div>
                </div>
                
                <div class="prototype-item">
                    <div class="prototype-header">
                        <div class="prototype-title">加工产品一览</div>
                        <div class="prototype-desc">加工产品列表页面，支持省市区筛选和分类筛选</div>
                    </div>
                    <iframe src="product-list-processing.html" class="prototype-frame"></iframe>
                    <div class="prototype-actions">
                        <a href="product-list-processing.html" target="_blank" class="action-btn btn-primary">独立查看</a>
                        <button class="action-btn btn-secondary" onclick="refreshFrame(this)">刷新</button>
                    </div>
                </div>
                
                <div class="prototype-item">
                    <div class="prototype-header">
                        <div class="prototype-title">产品详情</div>
                        <div class="prototype-desc">产品详细信息页面，包含产品名、规格、型号、地区、公司信息</div>
                    </div>
                    <iframe src="product-detail.html" class="prototype-frame"></iframe>
                    <div class="prototype-actions">
                        <a href="product-detail.html" target="_blank" class="action-btn btn-primary">独立查看</a>
                        <button class="action-btn btn-secondary" onclick="refreshFrame(this)">刷新</button>
                    </div>
                </div>
                
                <div class="prototype-item">
                    <div class="prototype-header">
                        <div class="prototype-title">加工详情</div>
                        <div class="prototype-desc">加工服务详细信息页面，包含加工能力、公司信息、接单情况</div>
                    </div>
                    <iframe src="product-detail-processing.html" class="prototype-frame"></iframe>
                    <div class="prototype-actions">
                        <a href="product-detail-processing.html" target="_blank" class="action-btn btn-primary">独立查看</a>
                        <button class="action-btn btn-secondary" onclick="refreshFrame(this)">刷新</button>
                    </div>
                </div>
                
                <div class="prototype-item">
                    <div class="prototype-header">
                        <div class="prototype-title">散料一览</div>
                        <div class="prototype-desc">散料列表页面，支持型号检索和省市区三级联动筛选</div>
                    </div>
                    <iframe src="bulk-materials.html" class="prototype-frame"></iframe>
                    <div class="prototype-actions">
                        <a href="bulk-materials.html" target="_blank" class="action-btn btn-primary">独立查看</a>
                        <button class="action-btn btn-secondary" onclick="refreshFrame(this)">刷新</button>
                    </div>
                </div>
                
                <div class="prototype-item">
                    <div class="prototype-header">
                        <div class="prototype-title">散料详情</div>
                        <div class="prototype-desc">散料详细信息页面，包含型号、产品类别、规格/数量、库存所在地、技术参数</div>
                    </div>
                    <iframe src="bulk-material-detail.html" class="prototype-frame"></iframe>
                    <div class="prototype-actions">
                        <a href="bulk-material-detail.html" target="_blank" class="action-btn btn-primary">独立查看</a>
                        <button class="action-btn btn-secondary" onclick="refreshFrame(this)">刷新</button>
                    </div>
                </div>
                
                <div class="prototype-item">
                    <div class="prototype-header">
                        <div class="prototype-title">检索结果页</div>
                        <div class="prototype-desc">搜索结果展示，支持按型号、产品名查询材料和库存</div>
                    </div>
                    <iframe src="search-results.html" class="prototype-frame"></iframe>
                    <div class="prototype-actions">
                        <a href="search-results.html" target="_blank" class="action-btn btn-primary">独立查看</a>
                        <button class="action-btn btn-secondary" onclick="refreshFrame(this)">刷新</button>
                    </div>
                </div>
                
                <div class="prototype-item">
                    <div class="prototype-header">
                        <div class="prototype-title">材料分类首页</div>
                        <div class="prototype-desc">材料分类导航页面，左侧分类右侧材料列表，支持滚动联动</div>
                    </div>
                    <iframe src="bulk-materials-category.html" class="prototype-frame"></iframe>
                    <div class="prototype-actions">
                        <a href="bulk-materials-category.html" target="_blank" class="action-btn btn-primary">独立查看</a>
                        <button class="action-btn btn-secondary" onclick="refreshFrame(this)">刷新</button>
                    </div>
                </div>
                
                <div class="prototype-item">
                    <div class="prototype-header">
                        <div class="prototype-title">加工分类首页</div>
                        <div class="prototype-desc">加工分类导航页面，左侧分类右侧加工服务列表，支持滚动联动</div>
                    </div>
                    <iframe src="bulk-processing-category.html" class="prototype-frame"></iframe>
                    <div class="prototype-actions">
                        <a href="bulk-processing-category.html" target="_blank" class="action-btn btn-primary">独立查看</a>
                        <button class="action-btn btn-secondary" onclick="refreshFrame(this)">刷新</button>
                    </div>
                </div>
                
                <div class="prototype-item">
                    <div class="prototype-header">
                        <div class="prototype-title">企业档案</div>
                        <div class="prototype-desc">企业详细信息页面，包含企业基本信息、业务对接人联系方式</div>
                    </div>
                    <iframe src="company-profile.html" class="prototype-frame"></iframe>
                    <div class="prototype-actions">
                        <a href="company-profile.html" target="_blank" class="action-btn btn-primary">独立查看</a>
                        <button class="action-btn btn-secondary" onclick="refreshFrame(this)">刷新</button>
                    </div>
                </div>
                
                <div class="prototype-item">
                    <div class="prototype-header">
                        <div class="prototype-title">积分规则说明</div>
                        <div class="prototype-desc">积分获得规则、等级制度和权益说明</div>
                    </div>
                    <iframe src="points-rules.html" class="prototype-frame"></iframe>
                    <div class="prototype-actions">
                        <a href="points-rules.html" target="_blank" class="action-btn btn-primary">独立查看</a>
                        <button class="action-btn btn-secondary" onclick="refreshFrame(this)">刷新</button>
                    </div>
                </div>
                
                <div class="prototype-item">
                    <div class="prototype-header">
                        <div class="prototype-title">免责声明</div>
                        <div class="prototype-desc">平台免责声明和风险提示</div>
                    </div>
                    <iframe src="disclaimer.html" class="prototype-frame"></iframe>
                    <div class="prototype-actions">
                        <a href="disclaimer.html" target="_blank" class="action-btn btn-primary">独立查看</a>
                        <button class="action-btn btn-secondary" onclick="refreshFrame(this)">刷新</button>
                    </div>
                </div>
                
                <div class="prototype-item">
                    <div class="prototype-header">
                        <div class="prototype-title">隐私政策</div>
                        <div class="prototype-desc">个人信息保护政策和用户权利说明</div>
                    </div>
                    <iframe src="privacy-policy.html" class="prototype-frame"></iframe>
                    <div class="prototype-actions">
                        <a href="privacy-policy.html" target="_blank" class="action-btn btn-primary">独立查看</a>
                        <button class="action-btn btn-secondary" onclick="refreshFrame(this)">刷新</button>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 求购tab -->
        <div class="category-section">
            <div class="category-title">
                <i class="fas fa-shopping-cart"></i>
                求购tab - 需求查看与接单
                <span class="status-badge status-complete">已完成</span>
            </div>
            <div class="prototype-grid">
                <div class="prototype-item">
                    <div class="prototype-header">
                        <div class="prototype-title">需求列表</div>
                        <div class="prototype-desc">求购需求列表页面，支持按省市区、产品分类筛选，展示浏览数、接单数、发布时间</div>
                    </div>
                    <iframe src="demand-list.html" class="prototype-frame"></iframe>
                    <div class="prototype-actions">
                        <a href="demand-list.html" target="_blank" class="action-btn btn-primary">独立查看</a>
                        <button class="action-btn btn-secondary" onclick="refreshFrame(this)">刷新</button>
                    </div>
                </div>
                
                <div class="prototype-item">
                    <div class="prototype-header">
                        <div class="prototype-title">需求详情</div>
                        <div class="prototype-desc">求购需求详细信息页面，包含接单功能和联系方式</div>
                    </div>
                    <iframe src="demand-detail.html" class="prototype-frame"></iframe>
                    <div class="prototype-actions">
                        <a href="demand-detail.html" target="_blank" class="action-btn btn-primary">独立查看</a>
                        <button class="action-btn btn-secondary" onclick="refreshFrame(this)">刷新</button>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 发布tab -->
        <div class="category-section">
            <div class="category-title">
                <i class="fas fa-plus-circle"></i>
                发布tab - 信息发布与管理
                <span class="status-badge status-complete">已完成</span>
            </div>
            <div class="prototype-grid">
                <div class="prototype-item">
                    <div class="prototype-header">
                        <div class="prototype-title">发布选择</div>
                        <div class="prototype-desc">发布类型选择模态框，包含求购类型和供应类型</div>
                    </div>
                    <iframe src="publish-select.html" class="prototype-frame"></iframe>
                    <div class="prototype-actions">
                        <a href="publish-select.html" target="_blank" class="action-btn btn-primary">独立查看</a>
                        <button class="action-btn btn-secondary" onclick="refreshFrame(this)">刷新</button>
                    </div>
                </div>
                
                <div class="prototype-item">
                    <div class="prototype-header">
                        <div class="prototype-title">创建企业</div>
                        <div class="prototype-desc">企业信息创建页面，包含公司logo、营业执照、企业全称、简称、类别、融资阶段、人员规模、公司性质、公司地址</div>
                    </div>
                    <iframe src="create-enterprise.html" class="prototype-frame"></iframe>
                    <div class="prototype-actions">
                        <a href="create-enterprise.html" target="_blank" class="action-btn btn-primary">独立查看</a>
                        <button class="action-btn btn-secondary" onclick="refreshFrame(this)">刷新</button>
                    </div>
                </div>
                
                <div class="prototype-item">
                    <div class="prototype-header">
                        <div class="prototype-title">发布拼单</div>
                        <div class="prototype-desc">拼单信息发布页面，包含表单输入和验证</div>
                    </div>
                    <iframe src="publish-group.html" class="prototype-frame"></iframe>
                    <div class="prototype-actions">
                        <a href="publish-group.html" target="_blank" class="action-btn btn-primary">独立查看</a>
                        <button class="action-btn btn-secondary" onclick="refreshFrame(this)">刷新</button>
                    </div>
                </div>
                
                <div class="prototype-item">
                    <div class="prototype-header">
                        <div class="prototype-title">拼单一览</div>
                        <div class="prototype-desc">拼单列表页面，展示所有拼单信息</div>
                    </div>
                    <iframe src="group-orders.html" class="prototype-frame"></iframe>
                    <div class="prototype-actions">
                        <a href="group-orders.html" target="_blank" class="action-btn btn-primary">独立查看</a>
                        <button class="action-btn btn-secondary" onclick="refreshFrame(this)">刷新</button>
                    </div>
                </div>
                
                <div class="prototype-item">
                    <div class="prototype-header">
                        <div class="prototype-title">拼单详情</div>
                        <div class="prototype-desc">拼单详细信息页面，包含参与者和操作按钮</div>
                    </div>
                    <iframe src="group-detail.html" class="prototype-frame"></iframe>
                    <div class="prototype-actions">
                        <a href="group-detail.html" target="_blank" class="action-btn btn-primary">独立查看</a>
                        <button class="action-btn btn-secondary" onclick="refreshFrame(this)">刷新</button>
                    </div>
                </div>
                
                <div class="prototype-item">
                    <div class="prototype-header">
                        <div class="prototype-title">发布求购</div>
                        <div class="prototype-desc">求购信息发布页面，包含产品选择和地址联动</div>
                    </div>
                    <iframe src="publish-demand.html" class="prototype-frame"></iframe>
                    <div class="prototype-actions">
                        <a href="publish-demand.html" target="_blank" class="action-btn btn-primary">独立查看</a>
                        <button class="action-btn btn-secondary" onclick="refreshFrame(this)">刷新</button>
                    </div>
                </div>
                
                <div class="prototype-item">
                    <div class="prototype-header">
                        <div class="prototype-title">发布加工</div>
                        <div class="prototype-desc">加工服务发布页面，包含规格数量和联系地址</div>
                    </div>
                    <iframe src="publish-processing.html" class="prototype-frame"></iframe>
                    <div class="prototype-actions">
                        <a href="publish-processing.html" target="_blank" class="action-btn btn-primary">独立查看</a>
                        <button class="action-btn btn-secondary" onclick="refreshFrame(this)">刷新</button>
                    </div>
                </div>
                
                <div class="prototype-item">
                    <div class="prototype-header">
                        <div class="prototype-title">发布材料</div>
                        <div class="prototype-desc">材料产品发布页面，包含技术参数和规格管理</div>
                    </div>
                    <iframe src="publish-material.html" class="prototype-frame"></iframe>
                    <div class="prototype-actions">
                        <a href="publish-material.html" target="_blank" class="action-btn btn-primary">独立查看</a>
                        <button class="action-btn btn-secondary" onclick="refreshFrame(this)">刷新</button>
                    </div>
                </div>
                
                <div class="prototype-item">
                    <div class="prototype-header">
                        <div class="prototype-title">发布库存</div>
                        <div class="prototype-desc">库存信息发布页面，包含会员开通模态框</div>
                    </div>
                    <iframe src="publish-inventory.html" class="prototype-frame"></iframe>
                    <div class="prototype-actions">
                        <a href="publish-inventory.html" target="_blank" class="action-btn btn-primary">独立查看</a>
                        <button class="action-btn btn-secondary" onclick="refreshFrame(this)">刷新</button>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 咨询tab -->
        <!-- <div class="category-section">
            <div class="category-title">
                <i class="fas fa-comments"></i>
                咨询tab - 在线沟通
                <span class="status-badge status-pending">待开发</span>
            </div>
            <div class="prototype-grid">
                <div class="prototype-item">
                    <div class="prototype-header">
                        <div class="prototype-title">在线咨询</div>
                        <div class="prototype-desc">客服咨询页面，进行在线沟通</div>
                    </div>
                    <div style="height: 600px; display: flex; align-items: center; justify-content: center; background: #f8f9fa; color: var(--text-light);">
                        <div style="text-align: center;">
                            <i class="fas fa-tools" style="font-size: 48px; margin-bottom: 15px;"></i>
                            <div>页面开发中...</div>
                        </div>
                    </div>
                    <div class="prototype-actions">
                        <button class="action-btn btn-secondary" disabled>待开发</button>
                    </div>
                </div>
            </div>
        </div> -->
        
        <!-- 我的tab -->
        <div class="category-section">
            <div class="category-title">
                <i class="fas fa-user"></i>
                我的tab - 个人信息与功能管理
                <span class="status-badge status-complete">已完成</span>
            </div>
            <div class="prototype-grid">
                <div class="prototype-item">
                    <div class="prototype-header">
                        <div class="prototype-title">个人中心</div>
                        <div class="prototype-desc">用户个人中心页面，包含姓名、职位、公司、所在地、快捷入口、会员权益、功能列表等</div>
                    </div>
                    <iframe src="profile.html" class="prototype-frame"></iframe>
                    <div class="prototype-actions">
                        <a href="profile.html" target="_blank" class="action-btn btn-primary">独立查看</a>
                        <button class="action-btn btn-secondary" onclick="refreshFrame(this)">刷新</button>
                    </div>
                </div>
                
                <div class="prototype-item">
                    <div class="prototype-header">
                        <div class="prototype-title">我的积分</div>
                        <div class="prototype-desc">查看自己的积分流水，积分用于兑换商品、兑换服务、升级会员</div>
                    </div>
                    <iframe src="my-points.html" class="prototype-frame"></iframe>
                    <div class="prototype-actions">
                        <a href="my-points.html" target="_blank" class="action-btn btn-primary">独立查看</a>
                        <button class="action-btn btn-secondary" onclick="refreshFrame(this)">刷新</button>
                    </div>
                </div>
                
                <div class="prototype-item" style="display: none;">
                    <div class="prototype-header">
                        <div class="prototype-title">我的询价</div>
                        <div class="prototype-desc">我的求购/接单记录，查看发布与接单记录</div>
                    </div>
                    <iframe src="my-inquiries.html" class="prototype-frame"></iframe>
                    <div class="prototype-actions">
                        <a href="my-inquiries.html" target="_blank" class="action-btn btn-primary">独立查看</a>
                        <button class="action-btn btn-secondary" onclick="refreshFrame(this)">刷新</button>
                    </div>
                </div>
                
                <div class="prototype-item" style="display: none;">
                    <div class="prototype-header">
                        <div class="prototype-title">我的订单</div>
                        <div class="prototype-desc">订单管理和订单状态跟踪页面</div>
                    </div>
                    <iframe src="my-orders.html" class="prototype-frame"></iframe>
                    <div class="prototype-actions">
                        <a href="my-orders.html" target="_blank" class="action-btn btn-primary">独立查看</a>
                        <button class="action-btn btn-secondary" onclick="refreshFrame(this)">刷新</button>
                    </div>
                </div>
                
                <div class="prototype-item">
                    <div class="prototype-header">
                        <div class="prototype-title">我的材料</div>
                        <div class="prototype-desc">材料库存管理和材料信息页面</div>
                    </div>
                    <iframe src="my-materials.html" class="prototype-frame"></iframe>
                    <div class="prototype-actions">
                        <a href="my-materials.html" target="_blank" class="action-btn btn-primary">独立查看</a>
                        <button class="action-btn btn-secondary" onclick="refreshFrame(this)">刷新</button>
                    </div>
                </div>
                
                <div class="prototype-item">
                    <div class="prototype-header">
                        <div class="prototype-title">我的材料详情</div>
                        <div class="prototype-desc">查看材料详细信息，包含询价人完整信息（姓名、手机号）和管理功能</div>
                    </div>
                    <iframe src="my-material-detail.html" class="prototype-frame"></iframe>
                    <div class="prototype-actions">
                        <a href="my-material-detail.html" target="_blank" class="action-btn btn-primary">独立查看</a>
                        <button class="action-btn btn-secondary" onclick="refreshFrame(this)">刷新</button>
                    </div>
                </div>
                
                <div class="prototype-item">
                    <div class="prototype-header">
                        <div class="prototype-title">我的求购一览</div>
                        <div class="prototype-desc">查看我发布的求购信息列表，包含接单状态和接单人信息</div>
                    </div>
                    <iframe src="my-demand-list.html" class="prototype-frame"></iframe>
                    <div class="prototype-actions">
                        <a href="my-demand-list.html" target="_blank" class="action-btn btn-primary">独立查看</a>
                        <button class="action-btn btn-secondary" onclick="refreshFrame(this)">刷新</button>
                    </div>
                </div>
                
                <div class="prototype-item">
                    <div class="prototype-header">
                        <div class="prototype-title">我的求购详情</div>
                        <div class="prototype-desc">查看求购详细信息，包含接单人完整信息（姓名、手机号）和接单统计</div>
                    </div>
                    <iframe src="my-demand-detail.html" class="prototype-frame"></iframe>
                    <div class="prototype-actions">
                        <a href="my-demand-detail.html" target="_blank" class="action-btn btn-primary">独立查看</a>
                        <button class="action-btn btn-secondary" onclick="refreshFrame(this)">刷新</button>
                    </div>
                </div>
                
                <div class="prototype-item">
                    <div class="prototype-header">
                        <div class="prototype-title">我的拼单一览</div>
                        <div class="prototype-desc">查看我发布的拼单信息列表，包含拼单状态和参与人信息</div>
                    </div>
                    <iframe src="my-group-orders.html" class="prototype-frame"></iframe>
                    <div class="prototype-actions">
                        <a href="my-group-orders.html" target="_blank" class="action-btn btn-primary">独立查看</a>
                        <button class="action-btn btn-secondary" onclick="refreshFrame(this)">刷新</button>
                    </div>
                </div>
                
                <div class="prototype-item">
                    <div class="prototype-header">
                        <div class="prototype-title">我的拼单详情</div>
                        <div class="prototype-desc">查看拼单详细信息，包含拼单成员完整信息（姓名、手机号）和管理功能</div>
                    </div>
                    <iframe src="my-group-detail.html" class="prototype-frame"></iframe>
                    <div class="prototype-actions">
                        <a href="my-group-detail.html" target="_blank" class="action-btn btn-primary">独立查看</a>
                        <button class="action-btn btn-secondary" onclick="refreshFrame(this)">刷新</button>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 登录注册 -->
        <div class="category-section">
            <div class="category-title">
                <i class="fas fa-sign-in-alt"></i>
                登录注册 - 用户认证
                <span class="status-badge status-fixed">已修复</span>
            </div>
            <div class="prototype-grid">
                <div class="prototype-item">
                    <div class="prototype-header">
                        <div class="prototype-title">登录页面</div>
                        <div class="prototype-desc">用户登录页面，支持手机号快速验证登录</div>
                    </div>
                    <iframe src="login.html" class="prototype-frame"></iframe>
                    <div class="prototype-actions">
                        <a href="login.html" target="_blank" class="action-btn btn-primary">独立查看</a>
                        <button class="action-btn btn-secondary" onclick="refreshFrame(this)">刷新</button>
                    </div>
                </div>
                
                <div class="prototype-item">
                    <div class="prototype-header">
                        <div class="prototype-title">手机验证</div>
                        <div class="prototype-desc">手机号验证码登录页面，支持免密登录</div>
                    </div>
                    <iframe src="phone-verification.html" class="prototype-frame"></iframe>
                    <div class="prototype-actions">
                        <a href="phone-verification.html" target="_blank" class="action-btn btn-primary">独立查看</a>
                        <button class="action-btn btn-secondary" onclick="refreshFrame(this)">刷新</button>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 页脚 -->
        <div class="footer">
            <p>© 2024 模切材料小管家 - 原型展示页面</p>
            <p>基于iPhone 15 Pro屏幕规格设计，使用HTML + CSS + JavaScript开发</p>
        </div>
    </div>
    
    <script>
        // 刷新iframe
        function refreshFrame(button) {
            const iframe = button.parentElement.previousElementSibling;
            const src = iframe.src;
            iframe.src = '';
            setTimeout(() => {
                iframe.src = src;
            }, 100);
        }
        
        // 页面加载完成后的处理
        document.addEventListener('DOMContentLoaded', function() {
            console.log('原型展示页面加载完成');
            
            // 为所有iframe添加加载状态
            const iframes = document.querySelectorAll('iframe');
            iframes.forEach(iframe => {
                iframe.addEventListener('load', function() {
                    console.log('iframe加载完成:', iframe.src);
                });
                
                iframe.addEventListener('error', function() {
                    console.error('iframe加载失败:', iframe.src);
                    iframe.style.display = 'none';
                    const errorDiv = document.createElement('div');
                    errorDiv.style.cssText = 'height: 600px; display: flex; align-items: center; justify-content: center; background: #f8f9fa; color: #dc3545;';
                    errorDiv.innerHTML = '<div style="text-align: center;"><i class="fas fa-exclamation-triangle" style="font-size: 48px; margin-bottom: 15px;"></i><div>页面加载失败</div></div>';
                    iframe.parentElement.insertBefore(errorDiv, iframe);
                });
            });
        });
    </script>
</body>
</html>

